<template>
  <view class="step-bar">
    <template v-for="item in context?.itemList.value ?? []">
      <view class="step-item" :class="{'step-item__active': item.id <= context?.currentIndex.value}">
        <view class="bar" :style="{backgroundColor: context?.props.barColor}">
          <view class="shade" :style="{backgroundColor: context?.props.activeBarColor}"/>
        </view>
        <label class="title">{{item.title}}</label>
        <label class="desc">{{item.desc}}</label>
      </view>
    </template>
  </view>
</template>
<script setup lang="ts">
import {inject} from 'vue'
import type {StepContext} from "@/components/Step/type";
const context = inject<StepContext>('StepContext')
</script>

<style lang="scss" scoped>
.step-bar{
  display: flex;
  .step-item{
    flex: 1;
    position: relative;
    text-align: center;
    .bar{
      height: 6px;
      width: 100%;
      .shade{
        height: 100%;
        width: 0;
        transition: all 400ms;
      }
    }
    .title{

    }
    .desc{

    }
    &__active{
      .bar{
        .shade{
          width: 100%;
        }
      }
    }
  }
}
</style>